<template >
    <div class="card_container" ref="modalContainer">
       <div class="card_dialog">
           <PscgoDialog :visible="visible" v-on:update:visible="handleCancel" v-on:update:close='handleCancel'/>
       </div>
        <div class="card_info" >
          <a-tabs position="left" size="large">
            <a-tab-pane key="1" title="基本信息">
              <a-space direction="vertical"  fill>
                  <a-descriptions title="存储位置" :column="{xs:1, md:1, lg:1}" align='left'>
                    <a-descriptions-item label="存储地址" :span="2">
                      <span>{{ fileInfo }}</span>
                    </a-descriptions-item>
                  </a-descriptions>
                  <div class='card_btn'>
                    <a-button type='primary' @click='handleSelect'>选择文件夹</a-button>
                  </div>
                  <!-- <a-descriptions title="卡密" :column="{xs:1, md:1, lg:1}">
                    <a-descriptions-item label="当前剩余点数:" :span="2">
                      <span>{{ point }}</span>
                    </a-descriptions-item>
                  </a-descriptions> -->
                  <a-descriptions title="版本" :column="{xs:1, md:1, lg:1}" >
                    <a-descriptions-item label="当前版本: " :span="2">
                      <span>{{ vesion }}</span>
                    </a-descriptions-item>
                  </a-descriptions>
                  <div class='card_btn'>
                    <a-button type='primary' @click='checkUpdate'>检查更新</a-button>
                  </div>
              </a-space>
            </a-tab-pane>
          </a-tabs>
        </div>
        <a-modal :visible="uploadVisble"  :hide-title="'true'" @cancel="handleCLoseUpload" @ok="handleOKUpload">
          <div>检测到文档内容有更新，去地址<a :href="loadURL" target="_blank">{{ loadURL }}</a>下载最新版本?</div>
        </a-modal>
    </div>
</template>

<script setup>
import { onMounted, ref, computed } from 'vue';
import { Notification } from '@arco-design/web-vue';
import PscgoDialog from '@/components/PscgoDialog.vue'
import { useUserStore } from '@/store.js';

const userStore = useUserStore();

const user = computed(() => userStore.userInfo); // isVisible 是一个响应式变量
// const isVisible =  computed(() => user.value?.card_number & true);
const visible = ref(false);
const psd = ref('')
const fileInfo = ref('')
const vesion = ref('1.0.0')
const point = ref(0)
const uploadVisble = ref(false)
const loadURL = ref('')


const modalContainer = ref(null);

onMounted(async() => {
  if(user.value?.card_number) {
    visible.value = false
    init()
  }
  window?.electron?.onUpdateAccepted(() => {
    // customAlert('用户接受了更新。');
    Notification.success('用户接受了更新。')
  });

  window?.electron?.onUpdateDeclined(() => {
    // customAlert('用户拒绝了更新。');
    Notification.err('用户拒绝了更新。')
  });

  window?.electron?.onNoUpdateAvailable(() => {
    Notification.warning('没有可用的更新。')
  });
  // console.log(container); // 确保这里不会打印 undefined
 
})

const init =  async () => {
  try{
    const appInfo = await window?.electron?.AppInfo(psd.value)
    point.value = appInfo.points
    vesion.value = appInfo.version
    fileInfo.value = appInfo.path

  } catch(err) {console.log(err)}
  
}

// eslint-disable-next-line no-unused-vars
// const getPopupContainer = () => modalContainer.value;
// eslint-disable-next-line no-unused-vars
const handleOk = async () => {
  if(!psd?.value) {
    Notification.info({
      title: 'Notification',
      content: 'This is a notification!',
    })
    return
  } else {
    // 提交
    await window?.electron?.submitCard(psd?.value);
    localStorage.setItem('card_number',psd?.value )
    visible.value = false
    // isVisible.value = true
    init()
  }

}

// eslint-disable-next-line no-unused-vars
const handleSelect = async() => {
  try {
      const filePaths = await window?.electron?.selectDirs();
      console.log('Selected file paths:', filePaths);
      if (filePaths.length > 0) {
        fileInfo.value = filePaths[0]
      } else {
        fileInfo.value = '没有存储地址';
      }
    } catch (error) {
      console.error('Error selecting folder:', error);
      Notification.error(`选择存储地址失败 ${error}`)
    }
}

// 确定
const handleOKUpload =() => {
  uploadVisble.value = false;
  window.open(loadURL.value, '_blank');
}

const handleCLoseUpload = () => {
  uploadVisble.value = false;
}

// eslint-disable-next-line no-unused-vars
const checkUpdate = async() => {
  const result = await window?.electron?.checkForUpdate();
  if(result) {
    loadURL.value = result;
    uploadVisble.value = true
    // const ModalContent = {
    //   setup(){
    //     return h('div', [
    //         h('p', '检测到文档内容有更新，去地址'),
    //         h('a', {
    //           attrs: {
    //             href: result,
    //             target: '_blank',
    //             rel: 'noopener noreferrer'
    //           }
    //         }, '点击这里'),
    //         h('p', '下载最新版本?')
    //       ]);
    //     }
    //   }
    // }

    // Modal.info({
    //   title: '',
    //   // content: () => h(ModalContent)
    //   content: `检测到文档内容有更新，去地址${result}下载最新版本?`
    // });
    window?.electron?.onUpdateAccepted(() => {
      Notification.success('更新成功')
      uploadVisble.value = false
    });
  } else {
    Notification.success('目前是最新版本')
  }
 
}



// eslint-disable-next-line no-unused-vars
const handleCancel = () => {
  visible.value = false
}

// console.log(handleSelect, checkUpdate, handleOk)

</script>


<style scoped>
  .card_container {
    margin-top: 20px;
    overflow: auto;
      
  }
  .card_info {

  }
  .card_btn {
    text-align: left;
  }
  .card_container :deep(.arco-tabs-nav-size-large.arco-tabs-nav-type-line .arco-tabs-tab ){
    font-size: 16px;
  }
  .card_container :deep(.arco-tabs-nav-vertical.arco-tabs-nav-type-line .arco-tabs-tab) {
    padding: 0 20px 0 0 ; 
  }
  .card_container :deep(.arco-descriptions-title) {
    text-align: left;
  }
  .arco-modal-container {
    z-index: 2 !important;
  }
</style>